<template>
  <div class="box2">
    <div class="zuozhe">
      <div class="warp" v-for="(item,index) in info" :key="index">
        <div class="time" >
          <div class="yuan">
            <img :src="item.img" alt />
          </div>
          <p class="p1">{{item.author}}</p>
          <p class="p2">{{item.city}}</p>
          <span>{{item.time}}</span>
          <div class="imgs" @click="particular(item.id)">
            <img :src="item.img2" alt />
          </div>
          <p class="text">{{item.text}}</p>
          <div class="like">
            <div class="aixin">
              <span class="icon iconfont xin" v-if="flagsItuidao" @click="clickIcon">&#xe85c;</span>
               <span class="icon iconfont xin" v-else @click="clickIcon2">&#xe602;</span>
              <p class="aixin-text">403</p>
            </div>
            <div class="pinglun icon iconfont">
              <span class="icon iconfont pinglun-icon">&#xe603;</span>
              <p class="pinglun-text">26</p>
            </div>
          </div>
        </div>
      </div>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
     flagsItuidao:false
    };
  },
  methods: {
    // 进入详情页
    particular(id){
     this.$router.push("/particular/"+id);
    },
    clickIcon(){
      this.flagsItuidao=!this.flagsItuidao
      localStorage.setItem('flagsItuidao',this.flagsItuidao)
    },
    clickIcon2(){
       this.flagsItuidao=!this.flagsItuidao
      localStorage.setItem('flagsItuidao',this.flagsItuidao)
    }
  },
  mounted() {
    
  var fun =function(){
   this.name='perter';
   return{
       name:'jack'
   } 
}
var p=new fun()
console.log(p)
    if(localStorage.getItem('flagsItuidao')){
      this.flagsItuidao=localStorage.getItem('flagsItuidao')
   }
    this.api.GetItuidao().then(data => {
      this.info = data.data.Ituidao;
     // console.log(this.info);
    });
  }
};
</script>
 
<style lang="less" scoped>
.box2 {
  background: #eee;
  overflow: hidden;
  .zuozhe {
    width: 99%;
    background: #fff;
    margin: 0 auto;
    overflow: hidden;

    .warp {
      width: 97%;
      margin: 0 auto;
      background: #fff;
      .time:last-child{
          height:7.3rem;
      }
      .time {
        width: 100%;
        position: relative;
        border-bottom: 8px solid #eee;
     
        span {
          position: absolute;
          top: 0.3rem;
          right: 0;
          font-size: 14px;
          color: #333;
        }
        .p1 {
          color: #000;
          position: absolute;
          top: 0.1rem;
          left: 1.6rem;
          font-size: 15px;
        }
        .p2 {
          color: #666;
          font-size: 12px;
          position: absolute;
          top: 0.6rem;
          left: 1.6rem;
        }
        .yuan {
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          background: pink;
          margin: 0.1rem 0;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .like {
          width: 100%;
          height: 1rem;
          border-top: 2px solid #f5f5f5;
          box-sizing: border-box;
          .aixin {
            width: 48%;
            height: 0.8rem;
            float: left;
            margin: 0.1rem 0;
            border-right: 2px solid #f5f5f5;
            position: relative;
            .xin {
              position: absolute;
              top: 0.1rem;
              left: -0.3rem;
              font-size: 0.6rem;
              color: red;
              text-align: center;
              border: 0;
              float: left;
            }
            .aixin-text {
              font-size: 12px;
              color: #666;
              float: left;
              position: absolute;
              top: 0.25rem;
              left: 1.9rem;
              box-sizing: border-box;
            }
          }

          .pinglun {
            width: 48%;
            height: 0.8rem;
            float: left;
            margin: 0.1rem 0;
            position: relative;
            .pinglun-text {
              font-size: 12px;
              color: #666;
              position: absolute;
              top: 0.2rem;
              left: 1.92rem;
            }
            .pinglun-icon {
              font-size: 0.6rem;
              position: absolute;
              top: 0.1rem;
              left: 1.25rem;
              color: #666;
            }
          }
        }
      }
      .imgs {
        width: 100%;
        img {
          width: 100%;
          height: 3.8rem;
          padding: 0.2rem 0;
        }
      }
      .text {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
        font-size: 12px;
        color: #333;
        margin-bottom: 0.2rem;
      }
    }
    .kong{
      height: 2rem;
    }
  }
}
</style>